<template>
	<div class="qy-view-course-learn" :style="{ 'overflow': showLearnDetail ? 'auto' : '' }">
		<uni-nav-bar fixed shadow :border="false" :title="courseInfo.name || ''" left-icon="left" @clickLeft="back"
			@clickRight="onClickRight">
		</uni-nav-bar>
		<div  style="height: 100%">
			<div class="page-course-view">
				<div >
					<div id="page-view-video">
						<video autoplay id="myVideo" src="/static/video/learn_video.mp4" :initial-time="40"></video>
					</div>
					
				</div>
			</div>
			<div class="course-learn-wrap no-bar" >
				<div class="course-detail-wrap">
					<div class="top-wrap">
						<span class="" v-show="false"
							v-if="chapterInfo.chapterIndexName">{{ chapterInfo.chapterIndexName }}
						</span><span>{{ chapterInfo.name }}</span>
					</div>
					<div class="bottom-wrap">
						<div class="bottom-left">
							<span
								class="normal-color">{{ courseInfo.courseRegUserDto ? dealRegType(courseInfo.courseRegUserDto.regType) : '—' }}
								<span>
									-
									已学习{{ !courseInfo.compleltedLessonNum || courseInfo.compleltedLessonNum == 0 ? 0 : (courseInfo.compleltedLessonNum/courseInfo.lessonNum * 100).toFixed(2) }}%
								</span>
							</span>
							<span> | 共{{ courseInfo.lessonNum }}课时</span>
						</div>
					</div>
				</div>
				<div class="page-tab-wrap">
					<van-tabs v-model="activeTab" v-if="tabList.length">
						<van-tab v-for="(item, index) in tabList" :key="index" :title="item.name">
							<Lesson :courseId="courseId" v-if="item.id == 1" ref="lessonWrap" learnStatus highlightNode
								:chapterProgressInfo="chapterProgressInfo" :isStudyFree="isStudyFree"
								:learnChapterId="learnChapterId" :initChapterId="currentLessonId"
								@current-data="getCurrentNodeData"></Lesson>
							<Notes :chapterId="chapterInfo.chapterId" :contentType="chapterInfo.contentType"
								edit  :noteTime="currentNoteTime+''"
								:courseId="courseId" v-if="item.id == 3">
							</Notes>
						</van-tab>
					</van-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		dealFaultLearnStatus,
		dealRegType
	} from '@/assets/js/util'
	import Lesson from '@/components/course/Lesson.vue'
	import Notes from '@/components/course/Notes.vue'
	import VanIcon from "@/components/vant/van-icon/van-icon.vue";
	import VanTabs from "@/components/vant/van-tabs/van-tabs.vue";
	import VanTab from "@/components/vant/van-tab/van-tab.vue";
	import mockData from "@/mock/course/chapter_detail.json"
	export default {
		head() {
			return {
				title: this.pageTitle,
			}
		},
		components: {
			VanTab,
			VanTabs,
			VanIcon,
			Lesson,
			Notes
		},
		props: {
			learnChapterId: {
				type: String,
				default: ''
			},
			courseId: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				courseInfo: {},
				chapterInfo: {},
				chapterProgressInfo: {}, 
				studyInfo: {}, 
				activeTab: 0,
				recordPerTime: 5,
				forceAlertPerTime: 60, 
				isStudyFree: true,
				pageCompleted: {
					'course': false,
					'chapter': false
				},
				currentLessonId: 'first',
				currentChapterId: '',
				chapterTimeInfo: { 
					userSecond: 0
				},
				currentNoteTime: '',
				autoPlay: false,
				showLearnDetail: false
			}
		},
		mounted() {
			this.getLearnStatus()
		},
		beforeDestroy() {
			this.shutdownPage()
		},
		computed: {
			pageTitle() {
				return this.courseInfo.name || '课程学习'
			},
			tabList() {
				return  [{
					id: 1,
					name: '目录'
				}, {
					id: 3,
					name: '笔记'
				}]
			},
		},
		methods: {
			dealRegType(type) {
				return dealRegType(type)
			},

			// 监听页面关闭事件
			initPageEvent() {
				this.$emit('handleBackPress')
			},
			// 公共提示
			pageAlert(msg, showConfirmButton = true, fn) {
				this.$dialog.alert({
					message: msg,
					showConfirmButton: showConfirmButton
				}).then(() => {
					fn && fn()
				})
			},
			// 获取课程是否可学
			getLearnStatus() {
				this.learnStatus = mockData.learnStatusData.learnStatus
				this.initPageEvent()
				this.getCourseInfo()
			},
			getCourseInfo() {
				let res = mockData.chapterData;
				if ((this.learnStatus == 1 && res.type == 3) || this.learnStatus != 1) {
					this.courseInfo = res
					if (res.autoSaveInterval) {
						this.recordPerTime = res.autoSaveInterval
					}
					this.forceAlertPerTime = res.maxTimesPerLesson || 0
					this.isStudyFree = (res.isStudyFree != 2)
					this.pageCompleted.course = true
				} else {
					this.pageAlert(dealFaultLearnStatus(res.learnStatus))
				}
			},
			getCourseStudyInfo() {
				let params = {
					courseId: this.courseId,
					chapterId: this.chapterInfo.chapterId
				}
				this.$api.course.courseStudyInfo(params).then(res => {
					this.studyInfo = res
				})
			},
			back() {
				if (this.showLearnDetail) {
					this.closeDetailPage()
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			onClickRight() {
				this.$refs.detail.onClickRight()
			},
			getCurrentNodeData(data, autoPlay = false) {
				this.autoPlay = autoPlay
				this.currentChapterId = data.chapterId
				let params = {
					courseId: this.courseId,
					chapterId: data.chapterId
				}
				this.chapterTimeInfo = mockData.chapterTimeInfo;
				this.courseInfo.courseUserRecordDto = Object.assign(this.courseInfo.courseUserRecordDto,mockData.chapterTime)
				this.$nextTick(() => {
					this.dealNodeData(data)
				})
			},

			// 赋值
			dealNodeData(data) {
				this.pageCompleted.chapter = false
				this.chapterInfo = data
				this.pageCompleted.chapter = true
			},
		}
	}
</script>
<style lang="scss" scoped>
	.qy-view-course-learn {
		height: 100vh;
		overflow: hidden;

		.page-course-view {
			height: 210px;
			position: relative;

			#page-content-view-video {
				height: 210px;

				.iframe-video {
					width: 100%;
					height: 210px;
					border: none;
				}
			}

			#page-view-video {
				height: 210px;

				uni-video {
					width: 100%;
					height: 210px;
				}
			}

			.aplayer-mobile {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
			}

			.back-icon {
				position: absolute;
				top: 10px;
				left: 10px;
				z-index: 1;
				color: #fff;
				font-size: 20px;
			}

			.view-content {
				height: 100%;
			}

			.view-content-pic {
				text-align: center;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.unsupport-bg {
				background-image: url('../../static/image/learn_unsupport_bg.png');
				width: 100%;
				height: 100%;

				.unsupport-desc {
					position: relative;
					top: 90px;
					font-size: 16px;
					color: #fff;
					text-align: center;
				}

				.unsupport-opt {
					position: relative;
					top: 76px;
					text-align: center;

					.desc {
						font-size: 14px;
						color: #fff;
						margin-bottom: 16px;
					}

					button {
						height: 36px;
					}
				}
			}
		}

		.course-learn-wrap {
			height: calc(100% - 240px);

			.course-detail-wrap {
				padding: 15px;
				border-bottom: 6px solid #f6f6f6;

				.top-wrap {
					min-height: 25px;
					font-size: 18px;
					font-weight: 600;
				}

				.bottom-wrap {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					margin-top: 6px;

					.bottom-left {
						font-size: 14px;
						color: #999999;
						line-height: 20px;
					}
				}
			}

			.page-tab-wrap {
				height: calc(100% - 88px);
			}

			:deep(.van-tabs) {
				height: 100%;
			}

			:deep(.van-tab-body) {
				height: calc(100% - 90px);
				overflow: auto;
				padding-bottom: 20px;
			}
		}
	}
</style>